<template>
    <div>
        <n-row>
          <n-col :span="6">
            <n-form-item label="名称">
                <n-input v-model:value="modelQueryForm.modelName"></n-input>
            </n-form-item>
          </n-col>
          <n-col>
            <n-form-item>
              <n-button type="primary" style="margin-left: 5px;" @click="getModelList">搜索</n-button>
            </n-form-item>
          </n-col>
        </n-row>
        <n-spin :show="resourceLoading" size="large">
          <n-grid x-gap="12" :cols="6" style="min-height: 500px;">
              <n-gi v-for="(model ,index) in loraList" style="margin-top: 20px">
                <n-card
                    content-style="padding:10px 10px 10px 10px;font-size:15px;">
                    <template #cover>
                        <div class="image-container">
                            <n-image :src="fileFunction.getSDModelImage(model.modelName,'lora')"   class="centered-image" :height="300" alt="123"/>
                        </div>
                    </template>
                    <n-ellipsis style="width: 100%">
                        {{model?.modelName}}
                    </n-ellipsis>
                    <template #action>
                      <n-button size="small" type="primary" @click="emitModelSelectEvent(model)" >选择</n-button>
                    </template>
                </n-card>
              </n-gi>
          </n-grid>
      </n-spin>
  </div>
</template>
<script setup lang="ts">
import {useMessage} from 'naive-ui'
import {onMounted, ref, reactive, defineEmits} from "vue"
//@ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {storeToRefs} from "pinia";
import {useSystemStore} from "@/store/modules/useSystemStore"
import {useUserStore} from "@/store/modules/useUserStore"
import {store} from "@/store"
import {civitaiController} from "@/api/controller/civitai/civitaiController";
import {storyController} from "@/api/story/story.api";
import {resourceController} from "@/api/resource/resourceController.api";
 
const {
  clientHeight,
  collapsed,
  darkTheme,
} = storeToRefs(useSystemStore());


const message = useMessage()
const story = ref("")
const modelList =ref([])
const resourceId = ref("")
const resourceLoading = ref(false)
const loraList = ref([])
const resourceConfig = ref(null)
const modelOption = ref([])
const vaeOption = ref([])

const props = defineProps({
    modelType : {
        type: String,
        required: true
    },
    storyId : {
      type: String
    },
   resourceId:{
      type: String
   }
})


const modelQueryForm = reactive({
    modelType: props.modelType,
    modelName: '',
    chapterId: props.storyId
})


onMounted(() => {
  if(props.resourceId && props.resourceId.length > 0){
    getResourceConfig(props.resourceId)
  }else {
    getPaintConfig()
  }
})

const getPaintConfig = async () => {
  try{
      const res = await storyController.getStoryPaintConfig(props.storyId);
      if(res.code === 200){
        resourceId.value = res.data.resourceId
        getResourceConfig(resourceId.value)
      } else {
        message.error(res.msg);
      }
  }catch (error){
    console.error(error);
  }
}

const getResourceConfig = (resouceId:string) =>{
  resourceLoading.value = true
  resourceController.getReousceConfig(resouceId).then(res=>{
    resourceLoading.value = false
    if(res.code === 200){
      resourceConfig.value = res.data
      modelOption.value = []
      vaeOption.value = []
      loraList.value = []
      res.data.modelList.forEach((item:any)=>{
        console.log(item)
        // @ts-ignore
        modelOption.value.push({
          label: item.fileName,
          value: item.fileName,
          url: item.modelImage
        })
      })
      res.data.vaeList.forEach((item:any)=>{
        // @ts-ignore
        vaeOption.value.push({
          label: item,
          value: item
        })
      })
      res.data.loraList.forEach((item:any)=>{
        if(item.length > 0 ) {
          // @ts-ignore
          loraList.value.push({
            name: item
          })
        }
      })
      loraList.value = res.data.loraList
      console.log(loraList)
    } else {
      message.error(res.msg);
    }
  })
}


const getModelList = () =>{
    civitaiController.modelList(modelQueryForm,{
        page: 0,
        pageSize: 1000
    }).then(res => {
        if(res.code===200){
            modelList.value = res.data.list
        }else {
            message.error(res.msg)
        }
    })
}

const emit = defineEmits()
const emitModelSelectEvent = (model:any) =>{
    emit('modelSelectEvent',model)
}


</script>
<style>
.image-container {
    height: 250px; /* 设置容器的固定高度 */
    display: flex; /* 使用Flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.centered-image {
    max-height: 100%; /* 图片的最大高度为容器高度，宽度会自动适应宽高比例 */
    max-width: 100%; /* 图片的最大宽度为容器宽度，高度会自动适应宽高比例 */
}

</style>
